<template>
    <div class="">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="55%"
                :close-on-click-modal="false"
                @close="close"
        >
          <div class="">
            <el-form ref="form" :model="form" label-width="120px">
              <div class="flex-bet flex-y-top">
                <div class="bflex-4">
                  <div class="shuju_title">
                    <div class="shuju_title_text">
                      <span>订单信息</span>
                    </div>
                  </div>
                  <div class="formBox">
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">订单类型：</div>
                      <div>
                        <span><el-tag size="mini" type="success">酒水寄存</el-tag></span>
                      </div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">订单号：{{orderDetail.outTradeNo}}</div>
                      <div></div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">订单渠道：</div>
                      <div>
                        <span v-if="orderDetail.origin=='1'"><el-tag size="mini" type="success">微信小程序</el-tag></span>
                        <span v-if="orderDetail.origin=='2'"><el-tag size="mini" type="success">微信公众号</el-tag></span>
                        <span v-if="orderDetail.origin=='3'"><el-tag size="mini" type="success">支付宝小程序</el-tag></span>
                        <span v-if="orderDetail.origin=='4'"><el-tag size="mini" type="success">百度小程序</el-tag></span>
                        <span v-if="orderDetail.origin=='5'"><el-tag size="mini" type="success">H5</el-tag></span>
                        <span v-if="orderDetail.origin=='6'"><el-tag size="mini" type="success">PC</el-tag></span>
                        <span v-if="orderDetail.origin=='7'"><el-tag size="mini" type="success">头条小程序</el-tag></span>
                      </div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">用户信息：</div>
                      <div>{{ orderDetail.nickName }}（UID：{{ orderDetail.userId }}）</div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">寄存人信息：{{orderDetail.userName}}/{{orderDetail.userTel}}</div>
                      <div></div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">订单状态：</div>
                      <div class="flex flex-center">
                        <div>
                          <div v-if="orderDetail.state=='1'"><el-tag size="mini">待确认</el-tag></div>
                          <div v-if="orderDetail.state=='2'"><el-tag size="mini" type="success">已存取</el-tag></div>
                          <div v-if="orderDetail.state=='3'"><el-tag size="mini" type="info">已拒绝</el-tag></div>
                          <div v-if="orderDetail.state=='4'"><el-tag size="mini" type="danger">已失效</el-tag></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="bflex-6 mar_l20">
                  <div class="shuju_title">
                    <div class="shuju_title_text">
                      <span>寄存详情</span>
                    </div>
                  </div>
                  <div class="formBox">
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">酒品名称：</div>
                      <div class="">{{ orderDetail.name }}</div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">寄存数量：</div>
                      <div class="">{{ orderDetail.totalNum }}</div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">
                        剩余数量：</div>
                      <div class="" v-if="type==1">{{ +orderDetail.totalNum - +orderDetail.takeNum }}（取酒数量：{{orderDetail.takeNum}}）</div>
                      <div class="" v-else>{{ orderDetail.surplusNum}}（取酒数量：{{orderDetail.takeNum}}）</div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">存酒时间：</div>
                      <div>{{ orderDetail.createdAt }}</div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">到期时间：</div>
                      <div class="color-red">{{ orderDetail.endAt }}</div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">订单备注：{{orderDetail.note || '无'}}</div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form>
            <div class="mar_t20">
              <div class="shuju_title">
                <div class="shuju_title_text">
                  <span>取酒记录</span>
                </div>
              </div>
              <el-scrollbar>
                <div class="zdh">
              <el-timeline class="mar_t20" v-if="type==1">
                <template   v-for="item in qjjl">
                  <el-timeline-item :timestamp="item.createdAt" placement="top">
                    <el-card :class="{ classDisabld:item.state=='3'}">
                      <h4>酒品名称：{{ item.name }}</h4>
                      <h4>取酒数量:
                        <span class="wei color-red"> {{item.takeNum}}
                          <span class="color_9 fnormal mar_l10">
                            <span v-if="item.state=='1'"><el-tag size="mini">待确认</el-tag></span>
                            <span v-if="item.state=='2'"><el-tag size="mini" type="success">已取出</el-tag></span>
                            <span v-if="item.state=='3'"><el-tag size="mini" type="info">已拒绝</el-tag></span>
                            <span v-if="item.state=='4'"><el-tag size="mini" type="danger">已失效</el-tag></span>
                          </span>
                        </span>
                      </h4>
                      <p>{{ item.userName }} 于 {{ item.createdAt }} 取酒</p>
                    </el-card>
                  </el-timeline-item>
                </template>
              </el-timeline>
              <el-timeline class="mar_t20" v-else>
                <template v-for="item in qjjl2">
                  <el-timeline-item :timestamp="item.createdAt" placement="top">
                    <el-card :class="{ classDisabld:item.state=='3'}">
                      <h4>酒品名称：{{ item.name }}</h4>
                      <h4>取酒数量:
                        <span class="wei color-red">{{item.takeNum}}
                          <span class="color_9 fnormal mar_l10">
                            <span v-if="item.state=='1'"><el-tag size="mini">待确认</el-tag></span>
                            <span v-if="item.state=='2'"><el-tag size="mini" type="success">已取出</el-tag></span>
                            <span v-if="item.state=='3'"><el-tag size="mini" type="info">已拒绝</el-tag></span>
                            <span v-if="item.state=='4'"><el-tag size="mini" type="danger">已失效</el-tag></span>
                          </span>
                        </span>
                      </h4>
                      <p>{{ item.userName }} 于 {{ item.createdAt }} 取酒</p>
                    </el-card>
                  </el-timeline-item>
                </template>
              </el-timeline>
                </div>
              </el-scrollbar>
            </div>
          </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {saveType, getSaveType, brandOrderList} from "@/api/plug";
    export default {
        name: "goodlistedit",
        created() {
        },
        data() {
            return {
                form: {
                    id:'',
                    sort: "1",
                    name: "",
                    min: "",
                    max: "",
                    minute: "",
                },
                orderDetail: {},
                title: "",
                type: 1,
                dialogFormVisible: false,
                qjjl:[],
                qjjl2:[],
            }
        },
        components: {
        },
        methods: {
            async showEdit(row,type) {
                if (!row) {
                    this.title = "添加";
                } else {
                    this.title = "取酒记录";
                  // this.form = data
                    this.orderDetail = Object.assign({}, row);
                    this.qjjl2.push(row)
                    this.type = type
                  const { data } = await brandOrderList({storageId:row.id,type:2});
                    this.qjjl = data?data:[]
                }
                this.dialogFormVisible = true;
            },
            close() {
                // this.$refs["form"].resetFields();
                // this.form = this.$options.data().form;
                this.dialogFormVisible = false;
                this.qjjl2=[]
            },
            setStoreId(storeId){
              this.form.storeId = storeId
            },
            save() {
              this.dialogFormVisible = false;
              this.qjjl2=[]
                // this.$refs["form"].validate(async (valid) => {
                //     if (valid) {
                //         const { msg } = await saveType(this.form);
                //         this.$baseMessage(msg, "success");
                //         this.$emit("fetchData");
                //         this.close();
                //     } else {
                //         return false;
                //     }
                // });
            },
        }
    };
</script>
<style>
  .zdyinput .el-input__inner{
    width: 180px;
  }
  .zdh{
    max-height: 500px;
  }
  .classDisabld{
    z-index:100;
    background: #eee;
    filter: alpha(Opacity=50);
    -moz-opacity:0.5;opacity: 0.5;
    pointer-events: none;
  }
</style>
